第20天啦，最近看了日劇 我和尾巴與神樂坂 真是會不小心被觸碰到，適合禮拜天的夜晚。

今天，配接器模式

配接器模式的作用就是解決兩個物件或是程式之間介面不相容的問題。

基本上我覺得這種模式，應該是軟體工程師最熟悉的模式。我們在開發過程中常常需要去呼叫別人的物件或是程式，舉例來說，上線許久的系統突然要求導入別單位開發好的新功能、使用時下新穎的模組有天突然發現人家改版了、底層架構突然更換，或是老闆要求新開發的系統要融合各種別家公司開發好的功能，做一個畫面資訊量爆表讓用戶眼花的系統。萬一這些物件介面的格式跟你的程式很難結合那該怎辦呢？

除了修改人家的程式碼以外，我們還有更好的選擇就是使用配接器模式，做一個將你的資料轉換成別人的程式認可的資料。現實生活中也有許多配接器模式的範例，例如：各種樣式的插頭轉換器、電源變壓器、各式介面轉換器(USB轉RS232,USB轉RJ45...)。

我們來用程式舉例，今天你的程式要顯示各家廠商提供的商品清單：

var companyA = {
    show: function () {
        console.log('A公司商品清單');
    }
};

var companyB = {
    show: function () {
        console.log('B公司商品清單');
    }
};

var renderList = function (company) {
    if (company.show instanceof Function) {
        company.show();
    }
};

renderList(companyA);
renderList(companyB);

然後突然B公司突然將他們的介面名稱改為getList，我們來試試用配接器模式來修改：

var companyA = {
    show: function () {
        console.log('A公司商品清單');
    }
};

var companyB = {
    getList: function () {
        console.log('B公司商品清單');
    }
};

上面可看到Ｂ公司換了介面，因此我們多做一個Ｂ公司用的介面，把他改的getList換成原本的show

var companyBAdapter = {
    show: function () {
        return companyB.getList();
    }
};

var renderList = function (company) {
    if (company.show instanceof Function) {
        company.show();
    }
};

renderList(companyA);
renderList(companyBAdapter);

我們再來看另一個例子，我們從某個網站獲取了一些天氣資料，我們將這些資料顯示於畫面上

var getWeatherData = function () {
    return [
        {
            name: 'ProbabilityOfPrecipitation',
            number: '12%'
        }, {
            name: 'MaximumTemperature',
            number: '30'
        }, {
            name: 'MinimumTemperature',
            number: '20'
        }
    ];
};

var renderView = function (fn) {
    console.log('show view');
    document.write(JSON.stringify(fn()));
}

renderView(getWeatherData);

然後上司覺得這些資料也太少了，所以我們又從別的網站抓取資料，這次獲得的資料比較多，但資料格式內容不一樣，且有一些重複資料：

var getNewWeatherData = {
    ProbabilityOfPrecipitation: '12%',
    Temperature: '26',
    Wind: 7
};

為了不修改顯示畫面的方法，我們來做個adapter轉換成一樣的資料格式

var weatherAdapter = function () {
    var infos = getWeatherData();
    for (var name in getNewWeatherData) {
        joinInfos(name, getNewWeatherData[name]);
    }
    return infos;

    function joinInfos(name, value) {
        if (!hasThisItem(name)) {
            infos.push({
                name: name,
                number: value
            });
        }
    }

    function hasThisItem(name) {
        return infos.some(function (info) {
            return info.name === name
        });
    }
}

之後使用方法就是都改用weatherAdapter囉

var renderView = function (fn) {
    console.log('show view');
    document.write(JSON.stringify(fn()));
}

renderView(weatherAdapter);

以上就是配接器模式。